/**
* @author: LiYaHui
* @date: 2021-11-01
* @description: 顶部标题卡片
*/
<template>
  <div class="title-card">
    <div class="title">{{ title }}</div>
    <div class="count">
      <count-to :end="count" count-class="count-text" unit-class="unit-class" ></count-to>
    </div>
  </div>
</template>

<script>
import CountTo from '_c/count-to'
export default {
  name: 'TitleCard',
  components: {
    CountTo
  },
  props: {
    title: String,
    count: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.title-card{
  display: flex;
  flex-shrink: 0;
  margin-bottom: 0.25rem;
  border: 1px solid rgb(28,204,223);
  width: 2.97rem;
  height: 1.34rem;
  position: relative;

  .title,
  .count {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    color: #0087F0;
    font-size: 0.28rem;
  }
  .title {
    color: #fff;
    font-size: 0.22rem;
    font-weight: bold;
    border-right: 1px solid rgb(26,33,45);
  }
}
.title-card:before{
  box-sizing: content-box;
  content: '';
  position: absolute;
  width: 80%;
  height: 100%;
  bottom: -1px;
  top: -1px;
  left: 10%;
  border-bottom: 1px solid rgb(26,33,45);
  border-top: 1px solid rgb(26,33,45);
}
.title-card:after{
  box-sizing: content-box;
  content: '';
  position: absolute;
  width: 100%;
  height: 80%;
  left: -1px;
  right: -1px;
  top: 10%;
  border-left: 1px solid rgb(26,33,45);
  border-right: 1px solid rgb(26,33,45);
}
</style>
